/* 
    基础的样式库 

    重置标签的默认样式，以及清除BootStrap的一些默认设置，达到各浏览器效果的统一
*/
/* BootStrap 会设置 a 标签焦点时有下划线，感觉不友好，这里给清除掉 */
a:focus,
a:hover {
  text-decoration: none;
}
ul {
  margin-bottom: 0;
}
.thumbnail > a {
  display: block;
}
.thumbnail > a > img {
  width: 100%;
}
/* 
    公共的样式库 

    这里不应该更改标签样式
*/
/*
    容器类  
    
    .c-*
*/
.c-scroll {
  overflow: auto;
}
.c-scroll-x {
  overflow-x: auto;
}
.c-scroll-y {
  overflow-y: auto;
}
/*

*/
.row-5 {
  /*.tagcss-float-grid-columns(@class,@columns);*/
  /*.tagcss-float-grid-columns(@class,@columns);*/
}
.row-5 .col-xs-5 {
  width: 100%;
}
.row-5 .col-xs-4 {
  width: 80%;
}
.row-5 .col-xs-3 {
  width: 60%;
}
.row-5 .col-xs-2 {
  width: 40%;
}
.row-5 .col-xs-1 {
  width: 20%;
}
.row-5 .col-xs-pull-5 {
  right: 100%;
}
.row-5 .col-xs-pull-4 {
  right: 80%;
}
.row-5 .col-xs-pull-3 {
  right: 60%;
}
.row-5 .col-xs-pull-2 {
  right: 40%;
}
.row-5 .col-xs-pull-1 {
  right: 20%;
}
.row-5 .col-xs-pull-0 {
  right: auto;
}
.row-5 .col-xs-push-5 {
  left: 100%;
}
.row-5 .col-xs-push-4 {
  left: 80%;
}
.row-5 .col-xs-push-3 {
  left: 60%;
}
.row-5 .col-xs-push-2 {
  left: 40%;
}
.row-5 .col-xs-push-1 {
  left: 20%;
}
.row-5 .col-xs-push-0 {
  left: auto;
}
.row-5 .col-xs-offset-5 {
  margin-left: 100%;
}
.row-5 .col-xs-offset-4 {
  margin-left: 80%;
}
.row-5 .col-xs-offset-3 {
  margin-left: 60%;
}
.row-5 .col-xs-offset-2 {
  margin-left: 40%;
}
.row-5 .col-xs-offset-1 {
  margin-left: 20%;
}
.row-5 .col-xs-offset-0 {
  margin-left: 0%;
}
.row-5 .col-xs-5 {
  width: 100%;
}
.row-5 .col-xs-4 {
  width: 80%;
}
.row-5 .col-xs-3 {
  width: 60%;
}
.row-5 .col-xs-2 {
  width: 40%;
}
.row-5 .col-xs-1 {
  width: 20%;
}
.row-5 .col-xs-pull-5 {
  right: 100%;
}
.row-5 .col-xs-pull-4 {
  right: 80%;
}
.row-5 .col-xs-pull-3 {
  right: 60%;
}
.row-5 .col-xs-pull-2 {
  right: 40%;
}
.row-5 .col-xs-pull-1 {
  right: 20%;
}
.row-5 .col-xs-pull-0 {
  right: auto;
}
.row-5 .col-xs-push-5 {
  left: 100%;
}
.row-5 .col-xs-push-4 {
  left: 80%;
}
.row-5 .col-xs-push-3 {
  left: 60%;
}
.row-5 .col-xs-push-2 {
  left: 40%;
}
.row-5 .col-xs-push-1 {
  left: 20%;
}
.row-5 .col-xs-push-0 {
  left: auto;
}
.row-5 .col-xs-offset-5 {
  margin-left: 100%;
}
.row-5 .col-xs-offset-4 {
  margin-left: 80%;
}
.row-5 .col-xs-offset-3 {
  margin-left: 60%;
}
.row-5 .col-xs-offset-2 {
  margin-left: 40%;
}
.row-5 .col-xs-offset-1 {
  margin-left: 20%;
}
.row-5 .col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .row-5 {
    /*.tagcss-float-grid-columns(@class,@columns);*/
  }
  .row-5 .col-sm-5 {
    width: 100%;
  }
  .row-5 .col-sm-4 {
    width: 80%;
  }
  .row-5 .col-sm-3 {
    width: 60%;
  }
  .row-5 .col-sm-2 {
    width: 40%;
  }
  .row-5 .col-sm-1 {
    width: 20%;
  }
  .row-5 .col-sm-pull-5 {
    right: 100%;
  }
  .row-5 .col-sm-pull-4 {
    right: 80%;
  }
  .row-5 .col-sm-pull-3 {
    right: 60%;
  }
  .row-5 .col-sm-pull-2 {
    right: 40%;
  }
  .row-5 .col-sm-pull-1 {
    right: 20%;
  }
  .row-5 .col-sm-pull-0 {
    right: auto;
  }
  .row-5 .col-sm-push-5 {
    left: 100%;
  }
  .row-5 .col-sm-push-4 {
    left: 80%;
  }
  .row-5 .col-sm-push-3 {
    left: 60%;
  }
  .row-5 .col-sm-push-2 {
    left: 40%;
  }
  .row-5 .col-sm-push-1 {
    left: 20%;
  }
  .row-5 .col-sm-push-0 {
    left: auto;
  }
  .row-5 .col-sm-offset-5 {
    margin-left: 100%;
  }
  .row-5 .col-sm-offset-4 {
    margin-left: 80%;
  }
  .row-5 .col-sm-offset-3 {
    margin-left: 60%;
  }
  .row-5 .col-sm-offset-2 {
    margin-left: 40%;
  }
  .row-5 .col-sm-offset-1 {
    margin-left: 20%;
  }
  .row-5 .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .row-5 {
    /*.tagcss-float-grid-columns(@class,@columns);*/
  }
  .row-5 .col-md-5 {
    width: 100%;
  }
  .row-5 .col-md-4 {
    width: 80%;
  }
  .row-5 .col-md-3 {
    width: 60%;
  }
  .row-5 .col-md-2 {
    width: 40%;
  }
  .row-5 .col-md-1 {
    width: 20%;
  }
  .row-5 .col-md-pull-5 {
    right: 100%;
  }
  .row-5 .col-md-pull-4 {
    right: 80%;
  }
  .row-5 .col-md-pull-3 {
    right: 60%;
  }
  .row-5 .col-md-pull-2 {
    right: 40%;
  }
  .row-5 .col-md-pull-1 {
    right: 20%;
  }
  .row-5 .col-md-pull-0 {
    right: auto;
  }
  .row-5 .col-md-push-5 {
    left: 100%;
  }
  .row-5 .col-md-push-4 {
    left: 80%;
  }
  .row-5 .col-md-push-3 {
    left: 60%;
  }
  .row-5 .col-md-push-2 {
    left: 40%;
  }
  .row-5 .col-md-push-1 {
    left: 20%;
  }
  .row-5 .col-md-push-0 {
    left: auto;
  }
  .row-5 .col-md-offset-5 {
    margin-left: 100%;
  }
  .row-5 .col-md-offset-4 {
    margin-left: 80%;
  }
  .row-5 .col-md-offset-3 {
    margin-left: 60%;
  }
  .row-5 .col-md-offset-2 {
    margin-left: 40%;
  }
  .row-5 .col-md-offset-1 {
    margin-left: 20%;
  }
  .row-5 .col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .row-5 {
    /*.tagcss-float-grid-columns(@class,@columns);*/
  }
  .row-5 .col-lg-5 {
    width: 100%;
  }
  .row-5 .col-lg-4 {
    width: 80%;
  }
  .row-5 .col-lg-3 {
    width: 60%;
  }
  .row-5 .col-lg-2 {
    width: 40%;
  }
  .row-5 .col-lg-1 {
    width: 20%;
  }
  .row-5 .col-lg-pull-5 {
    right: 100%;
  }
  .row-5 .col-lg-pull-4 {
    right: 80%;
  }
  .row-5 .col-lg-pull-3 {
    right: 60%;
  }
  .row-5 .col-lg-pull-2 {
    right: 40%;
  }
  .row-5 .col-lg-pull-1 {
    right: 20%;
  }
  .row-5 .col-lg-pull-0 {
    right: auto;
  }
  .row-5 .col-lg-push-5 {
    left: 100%;
  }
  .row-5 .col-lg-push-4 {
    left: 80%;
  }
  .row-5 .col-lg-push-3 {
    left: 60%;
  }
  .row-5 .col-lg-push-2 {
    left: 40%;
  }
  .row-5 .col-lg-push-1 {
    left: 20%;
  }
  .row-5 .col-lg-push-0 {
    left: auto;
  }
  .row-5 .col-lg-offset-5 {
    margin-left: 100%;
  }
  .row-5 .col-lg-offset-4 {
    margin-left: 80%;
  }
  .row-5 .col-lg-offset-3 {
    margin-left: 60%;
  }
  .row-5 .col-lg-offset-2 {
    margin-left: 40%;
  }
  .row-5 .col-lg-offset-1 {
    margin-left: 20%;
  }
  .row-5 .col-lg-offset-0 {
    margin-left: 0%;
  }
}
/*
    快速对齐工具
*/
.center-hor {
  text-align: center;
}
.center-hor .center-hor-body {
  display: inline-block;
}
/*
    表格类
*/
.table.table-data {
  border: 1px solid #cccccc;
}
.table.table-data th,
.table.table-data td {
  border: 1px solid #cccccc;
}
.table.table-data > thead > tr {
  background-color: #eeeeee;
}
.table.table-data > thead > tr > th {
  border-bottom: 1px solid #cccccc;
}
/* 取消BootStrap对表格的一些默认处理（我认为不好的） */
.tag-table > tbody + tbody {
  border-top: none;
}
/*
    .area

    用来表示一个区域，控制上下padding，margin，背景色等等

    通过设置一定的上下padding，再加上子元素 .container 的左右padding ，以达到一个比较友好的显示效果

    我设想的HTML结构应该是这样    .area > .container > .xxx

    - 如何扩展？
    .area-xxx 即可，xxx表示这一区块的含义，比如 .area-userinfo
*/
.area {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #fff;
}
/*
    .area-fluid

    推荐的HTML结构  .area-fluid > .container-fluid > .xxx

    仅仅有一个白色背景
*/
.area-fluid {
  background-color: #fff;
}
/*
    圆角Button
*/
.btn-round {
  border-radius: 2em;
}
.modal-full {
  position: absolute;
  width: 100%;
  padding: 0 20px;
}
